<template>
  <div class="box">
    <Header />
    <div class="roll-box" ref="scrollTopEle" @scroll="setscrollTopNum">
      <van-pull-refresh v-model="loading" @refresh="init(true)">
        <Banner :banner="banner" />
        <List :newsList="newsList" />
      </van-pull-refresh>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onActivated, reactive, toRefs } from "vue";
import { Toast } from "vant";
import { inteDataType, newsDataType, homeType } from "@/views/Home/interface";
import { getData } from "@/views/Home/home";
import Banner from "@/views/Home/components/Banner/index.vue";
import Header from "@/components/Header/index.vue";
import List from "@/views/Home/components/List/index.vue";
export default defineComponent({
  name: "Home",
  components: {
    Banner,
    Header,
    List,
  },
  setup() {
    const state = <homeType>reactive({
      loading: false,
      banner: [],
      scrollTopEle: null,
      newsList: [],
      scrollTopNum: 0,
    });
    const init = async (isLoad?: boolean) => {
      let { top_stories, date, stories }: inteDataType = await getData();
      state.banner = top_stories;
      state.newsList = [{ date, stories }];
      if (isLoad) {
        state.loading = false;
        Toast.success("刷新成功");
      }
    };
    init();
    onActivated(() => {
      (state.scrollTopEle as HTMLFormElement).scrollTop = state.scrollTopNum;
    });
    const setscrollTopNum = () => {
      state.scrollTopNum = (state.scrollTopEle as HTMLFormElement).scrollTop;
    };
    return { init, ...toRefs(state), setscrollTopNum };
  },
});
</script>

<style lang='scss' scoped>
.box {
  height: 100%;
  position: relative;
  overflow: auto;
}
.roll-box {
  height: calc(100% - 0.5rem);
  margin-top: 0.5rem;
  overflow: auto;
}
</style>